<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单确认 - 网上书城</title>
<!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
<!--    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>-->
<!--    <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
<!--    <script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>-->

    <!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <!--    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>-->
    <!--    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>-->
    <!--    <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->

<!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
        <link rel="stylesheet" href="./js/index.css">
    <!--    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>-->
    <script src="./js/vue.min.js"></script>
    <!--    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>-->
    <script src="./js/axios.min.js"></script>
    <!--    <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
    <script src="./js/index.js"></script>
    <style>
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f5f7fa;
            margin: 0;
            padding: 20px;
            color: #333;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
        .header {
            display: flex;
            align-items: center;
            padding-bottom: 20px;
            border-bottom: 1px solid #ebeef5;
        }
        .header h1 {
            margin: 0;
            font-size: 24px;
            color: #409EFF;
        }
        .steps {
            margin: 30px 0;
        }
        .section {
            margin-bottom: 30px;
            padding: 20px;
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
        }
        .section-title {
            font-size: 18px;
            margin-bottom: 20px;
            color: #303133;
            border-left: 4px solid #409EFF;
            padding-left: 10px;
        }
        .product-list {
            width: 100%;
            border-collapse: collapse;
        }
        .product-list th {
            background-color: #f8f8f9;
            height: 40px;
            text-align: left;
            padding: 10px;
            font-weight: 500;
        }
        .product-list td {
            padding: 15px 10px;
            border-bottom: 1px solid #ebeef5;
        }
        .product-info {
            display: flex;
            align-items: center;
        }
        .product-img {
            width: 80px;
            height: 100px;
            margin-right: 15px;
            border-radius: 4px;
            object-fit: cover;
        }
        .price {
            color: #ff5000;
            font-weight: bold;
        }
        .total-section {
            display: flex;
            justify-content: flex-end;
            padding: 20px;
            font-size: 16px;
        }
        .total-amount {
            font-size: 20px;
            color: #ff5000;
            margin: 0 5px;
            font-weight: bold;
        }
        .btn-submit {
            display: block;
            width: 200px;
            height: 50px;
            margin: 30px auto;
            font-size: 18px;
        }
        .footer {
            text-align: center;
            margin-top: 30px;
            color: #909399;
            font-size: 14px;
        }
        .form-item {
            margin-bottom: 22px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container">
        <div class="header">
            <h1>网上书城 - 订单确认</h1>
        </div>

        <div class="steps">
            <el-steps :active="1" align-center>
                <el-step title="购物车" description="选择商品"></el-step>
                <el-step title="订单确认" description="确认订单信息"></el-step>
                <el-step title="支付" description="完成支付"></el-step>
            </el-steps>
        </div>

        <!-- 收货信息 -->
        <div class="section">
            <h2 class="section-title">收货信息</h2>
            <div class="form">
                <div class="form-item">
                    <el-input v-model="orderInfo.name" placeholder="收货人姓名" clearable></el-input>
                </div>
                <div class="form-item">
                    <el-input v-model="orderInfo.phone" placeholder="联系电话" clearable></el-input>
                </div>
                <div class="form-item">
                    <el-input
                            v-model="orderInfo.address"
                            type="textarea"
                            :rows="3"
                            placeholder="详细地址"
                            clearable>
                    </el-input>
                </div>
            </div>
        </div>

        <!-- 商品列表 -->
        <div class="section">
            <h2 class="section-title">商品清单</h2>
            <table class="product-list">
                <thead>
                <tr>
                    <th width="45%">商品信息</th>
                    <th width="15%">单价</th>
                    <th width="15%">数量</th>
                    <th width="15%">小计</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item, index) in cartItems" :key="index">
                    <td>
                        <div class="product-info">
                            <img :src="item.image" class="product-img" alt="图书封面">
                            <div>
                                <div>{{ item.title }}</div>
                                <div style="color: #909399; font-size: 13px;">{{ item.author }}</div>
                            </div>
                        </div>
                    </td>
                    <td>¥<span class="price">{{ item.price.toFixed(2) }}</span></td>
                    <td>{{ item.count }}</td>
                    <td>¥<span class="price">{{ (item.price * item.count).toFixed(2) }}</span></td>
                </tr>
                </tbody>
            </table>
        </div>

        <!-- 订单金额 -->
        <div class="section">
            <div class="total-section">
                <span>共 {{ cartItems.length }} 件商品，总计：</span>
                <span class="total-amount">¥{{ totalAmount.toFixed(2) }}</span>
            </div>
        </div>

        <!-- 提交按钮 -->
        <el-button
                type="primary"
                class="btn-submit"
                @click="submitOrder"
                :loading="submitting">
            提交订单
        </el-button>

        <div class="footer">
            <p>© 2025 网上书城 - 专业图书购物平台</p>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                // 模拟购物车数据（实际应从购物车页面传递）
                cartItems: [
                    {
                        id: 'B001',
                        title: 'Vue.js设计与实现',
                        author: '霍春阳 著',
                        price: 89.00,
                        count: 1,
                        image: 'https://img1.doubanio.com/view/subject/s/public/s34022462.jpg'
                    },
                    {
                        id: 'B002',
                        title: 'Spring Boot实战',
                        author: '克雷格·沃斯 著',
                        price: 69.80,
                        count: 2,
                        image: 'https://img2.doubanio.com/view/subject/s/public/s29431715.jpg'
                    }
                ],
                orderInfo: {
                    name: '张三',
                    phone: '13800138000',
                    address: '北京市海淀区中关村大街1号'
                },
                submitting: false
            };
        },
        computed: {
            totalAmount() {
                return this.cartItems.reduce((sum, item) => {
                    return sum + (item.price * item.count);
                }, 0);
            }
        },
        methods: {

            submitOrder() {
                this.submitting = true;

                // 获取当前用户ID
                const userId = sessionStorage.getItem('currentUserId') || '99';

                // 构造订单数据
                const orderData = {
                    orders: {
                        userId: userId,  // 添加用户ID
                        orderToName: this.orderInfo.name,
                        orderToPhone: this.orderInfo.phone,
                        orderToAddress: this.orderInfo.address,
                        orderTotalPrice: this.totalAmount,
                        orderStatus: 1,
                        payStatus: 0
                    },
                    orderDescList: this.cartItems.map(item => ({
                        bookId: item.id,
                        count: item.count
                    })),
                    carIds: this.cartItems.map(item => item.cartId)
                };

                // 调用后端API提交订单
                axios.post('/car/orders/addOrder', orderData)
                    .then(response => {
                        if (response.data && response.data.code === 200) {
                            const order = response.data.data;

                            // 保存订单信息到sessionStorage
                            sessionStorage.setItem('currentOrder', JSON.stringify({
                                orderId: order.orderId,
                                totalAmount: order.orderTotalPrice
                            }));

                            // 跳转到支付页面
                            window.location.href = 'PayPage.html';
                        } else {
                            this.$message.error(response.data.msg || '订单提交失败');
                        }
                    })
                    .catch(error => {
                        console.error('订单提交错误:', error);
                        this.$message.error('订单提交失败，请重试');
                    })
                    .finally(() => {
                        this.submitting = false;
                    });
            },
            // submitOrder() {
            //     this.submitting = true;
            //
            //     // 构造订单数据
            //     const orderData = {
            //         orders: {
            //             orderToName: this.orderInfo.name,
            //             orderToPhone: this.orderInfo.phone,
            //             orderToAddress: this.orderInfo.address,
            //             orderTotalPrice: this.totalAmount,
            //             orderStatus: 1,
            //             payStatus: 0
            //         },
            //         orderDescList: this.cartItems.map(item => ({
            //             bookId: item.id,
            //             count: item.count
            //         })),
            //         carIds: this.cartItems.map(item => item.cartId) // 实际应从购物车获取
            //     };

                // // 调用后端API提交订单
                // axios.post('/car/orders/addOrder', orderData)
                //     .then(response => {
                //         if (response.data && response.data.code === 200) {
                //             const order = response.data.data;
                //
                //             // 保存订单信息到sessionStorage
                //             sessionStorage.setItem('currentOrder', JSON.stringify({
                //                 orderId: order.orderId,
                //                 totalAmount: order.orderTotalPrice
                //             }));
                //
                //             // 跳转到支付页面
                //             window.location.href = 'PayPage.html';
                //         } else {
                //             this.$message.error(response.data.msg || '订单提交失败');
                //         }
                //     })
                //     .catch(error => {
                //         console.error('订单提交错误:', error);
                //         this.$message.error('订单提交失败，请重试');
                //     })
                //     .finally(() => {
                //         this.submitting = false;
                //     });
           // }
        },
        mounted() {
            // 实际应用中，这里应该从购物车页面传递数据
            // 模拟从sessionStorage获取购物车数据
            const cartData = sessionStorage.getItem('cartItems');
            if (cartData) {
                this.cartItems = JSON.parse(cartData);
            }
        }
    });
</script>
</body>
</html>